<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.2">


  <link rel="apple-touch-icon" sizes="180x180" href="/page/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/page/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/page/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/page/images/logo.svg" color="#222">

<link rel="stylesheet" href="/page/css/main.css">



<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/all.min.css" integrity="sha256-mUZM63G8m73Mcidfrv5E+Y61y7a12O5mW4ezU3bxqW4=" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.1.1/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous">

<script class="next-config" data-name="main" type="application/json">{"hostname":"assd12138.gitee.io","root":"/page/","images":"/page/images","scheme":"Gemini","darkmode":false,"version":"8.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":false,"bookmark":{"enable":false,"color":"#222","save":"auto"},"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"stickytabs":false,"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/page/search.json","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/page/js/config.js"></script>
<meta name="description" content="Chrome94的最新版本中加入了空闲检测模拟，在本文中测试其使用方法">
<meta property="og:type" content="article">
<meta property="og:title" content="空闲检测模拟">
<meta property="og:url" content="https://assd12138.gitee.io/page/2021/09/26/%E7%A9%BA%E9%97%B2%E6%A3%80%E6%B5%8B%E6%A8%A1%E6%8B%9F/index.html">
<meta property="og:site_name" content="爱爱爱呵风他">
<meta property="og:description" content="Chrome94的最新版本中加入了空闲检测模拟，在本文中测试其使用方法">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://gitee.com/assd12138/cdnpics/raw/master/img/20210926135630.png">
<meta property="article:published_time" content="2021-09-26T03:25:23.000Z">
<meta property="article:modified_time" content="2022-05-09T03:18:13.064Z">
<meta property="article:author" content="爱爱爱呵风他">
<meta property="article:tag" content="JavaScript">
<meta property="article:tag" content="尝鲜">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://gitee.com/assd12138/cdnpics/raw/master/img/20210926135630.png">


<link rel="canonical" href="https://assd12138.gitee.io/page/2021/09/26/%E7%A9%BA%E9%97%B2%E6%A3%80%E6%B5%8B%E6%A8%A1%E6%8B%9F/">



<script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://assd12138.gitee.io/page/2021/09/26/%E7%A9%BA%E9%97%B2%E6%A3%80%E6%B5%8B%E6%A8%A1%E6%8B%9F/","path":"2021/09/26/空闲检测模拟/","title":"空闲检测模拟"}</script>

<script class="next-config" data-name="calendar" type="application/json">""</script>
<title>空闲检测模拟 | 爱爱爱呵风他</title>
  




  <noscript>
    <link rel="stylesheet" href="/page/css/noscript.css">
  </noscript>
</head>

<body itemscope itemtype="http://schema.org/WebPage" class="use-motion">
  <div class="headband"></div>

  <main class="main">
    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏" role="button">
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
        <span class="toggle-line"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/page/" class="brand" rel="start">
      <i class="logo-line"></i>
      <h1 class="site-title">爱爱爱呵风他</h1>
      <i class="logo-line"></i>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
        <i class="fa fa-search fa-fw fa-lg"></i>
    </div>
  </div>
</div>



<nav class="site-nav">
  <ul class="main-menu menu">
        <li class="menu-item menu-item-home"><a href="/page/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li>
        <li class="menu-item menu-item-tags"><a href="/page/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li>
        <li class="menu-item menu-item-archives"><a href="/page/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>
</nav>



  <div class="search-pop-overlay">
    <div class="popup search-popup"><div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocapitalize="off" maxlength="80"
           placeholder="搜索..." spellcheck="false"
           type="search" class="search-input">
  </div>
  <span class="popup-btn-close" role="button">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div class="search-result-container no-result">
  <div class="search-result-icon">
    <i class="fa fa-spinner fa-pulse fa-5x"></i>
  </div>
</div>

    </div>
  </div>

</div>
        
  
  <div class="toggle sidebar-toggle" role="button">
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
    <span class="toggle-line"></span>
  </div>

  <aside class="sidebar">

    <div class="sidebar-inner sidebar-nav-active sidebar-toc-active">
      <ul class="sidebar-nav">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <div class="sidebar-panel-container">
        <!--noindex-->
        <div class="post-toc-wrap sidebar-panel">
            <div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%94%AF%E6%8C%81%E6%A3%80%E6%B5%8B"><span class="nav-number">1.</span> <span class="nav-text">支持检测</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E6%9D%83%E9%99%90%E7%94%B3%E8%AF%B7"><span class="nav-number">2.</span> <span class="nav-text">权限申请</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%88%9B%E5%BB%BA%E5%AE%9E%E4%BE%8B"><span class="nav-number">3.</span> <span class="nav-text">创建实例</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A"><span class="nav-number">4.</span> <span class="nav-text">事件绑定</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%90%AF%E5%8A%A8%E6%A3%80%E6%B5%8B%E4%BA%8B%E4%BB%B6%E8%A7%A6%E5%8F%91"><span class="nav-number">5.</span> <span class="nav-text">启动检测事件触发</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%8A%B6%E6%80%81%E6%A3%80%E6%B5%8B"><span class="nav-number">6.</span> <span class="nav-text">状态检测</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%82%E5%B8%B8%E6%83%85%E5%86%B5"><span class="nav-number">7.</span> <span class="nav-text">异常情况</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7%E7%8A%B6%E6%80%81%E5%88%87%E6%8D%A2"><span class="nav-number">8.</span> <span class="nav-text">开发者工具状态切换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E5%9C%A8%E7%BA%BF%E5%AE%9E%E4%BE%8B"><span class="nav-number">9.</span> <span class="nav-text">在线实例</span></a></li></ol></div>
        </div>
        <!--/noindex-->

        <div class="site-overview-wrap sidebar-panel">
          <div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="爱爱爱呵风他"
      src="https://s1.ax1x.com/2020/08/26/dWnF58.jpg">
  <p class="site-author-name" itemprop="name">爱爱爱呵风他</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap site-overview-item animated">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
        <a href="/page/archives/">
          <span class="site-state-item-count">24</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-tags">
          <a href="/page/tags/">
        <span class="site-state-item-count">11</span>
        <span class="site-state-item-name">标签</span></a>
      </div>
  </nav>
</div>
  <div class="cc-license site-overview-item animated" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh-cn" class="cc-opacity" rel="noopener" target="_blank"><img src="https://cdn.jsdelivr.net/npm/@creativecommons/vocabulary@2020.11.3/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a>
  </div>



        </div>
      </div>
    </div>
  </aside>
  <div class="sidebar-dimmer"></div>


    </header>

    
  <div class="back-to-top" role="button" aria-label="返回顶部">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>

<noscript>
  <div class="noscript-warning">Theme NexT works best with JavaScript enabled</div>
</noscript>


    <div class="main-inner post posts-expand">


  


<div class="post-block">
  
  

  <article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="https://assd12138.gitee.io/page/2021/09/26/%E7%A9%BA%E9%97%B2%E6%A3%80%E6%B5%8B%E6%A8%A1%E6%8B%9F/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="https://s1.ax1x.com/2020/08/26/dWnF58.jpg">
      <meta itemprop="name" content="爱爱爱呵风他">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="爱爱爱呵风他">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          空闲检测模拟
        </h1>

        <div class="post-meta-container">
          <div class="post-meta">
    <span class="post-meta-item">
      <span class="post-meta-item-icon">
        <i class="far fa-calendar"></i>
      </span>
      <span class="post-meta-item-text">发表于</span>

      <time title="创建时间：2021-09-26 11:25:23" itemprop="dateCreated datePublished" datetime="2021-09-26T11:25:23+08:00">2021-09-26</time>
    </span>
      <span class="post-meta-item">
        <span class="post-meta-item-icon">
          <i class="far fa-calendar-check"></i>
        </span>
        <span class="post-meta-item-text">更新于</span>
        <time title="修改时间：2022-05-09 11:18:13" itemprop="dateModified" datetime="2022-05-09T11:18:13+08:00">2022-05-09</time>
      </span>

  
</div>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">
        <p>Chrome94的最新版本中加入了空闲检测模拟，在本文中测试其使用方法</p>
<span id="more"></span>

<h2 id="支持检测"><a href="#支持检测" class="headerlink" title="支持检测"></a>支持检测</h2><p>检测浏览器是否支持空闲检测的api</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(<span class="string">&#x27;IdleDetector&#x27;</span> <span class="keyword">in</span> <span class="variable language_">window</span>)&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;不支持空闲检测api&#x27;</span>)</span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;支持空闲检测api&#x27;</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="权限申请"><a href="#权限申请" class="headerlink" title="权限申请"></a>权限申请</h2><p>最新版本的chrome中需要进行权限申请后才可以使用空闲检测api，其提醒为<code>xxx网站</code>想要<code>了解您何时在主动使用此设备</code>，申请返回为Promise，可以根据用户选择进行相应的处理</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 申请权限</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">reqIdle</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">await</span> <span class="title class_">IdleDetector</span>.<span class="title function_">requestPermission</span>() === <span class="string">&#x27;granted&#x27;</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;获得权限&#x27;</span>)</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;用户禁止权限&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p>调用<code>IdleDetector.requestPermission()</code>有两种结果，允许为<code>granted</code>，禁止为<code>denied</code></p>
<h2 id="创建实例"><a href="#创建实例" class="headerlink" title="创建实例"></a>创建实例</h2><p>调用<code>new IdleDetector()</code>创建一个闲时检测的实例</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> idle = <span class="keyword">new</span> <span class="title class_">IdleDetector</span>()</span><br></pre></td></tr></table></figure>

<h2 id="事件绑定"><a href="#事件绑定" class="headerlink" title="事件绑定"></a>事件绑定</h2><p>在实例上绑定<code>change</code>事件</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">idle.<span class="title function_">addEventListener</span>(<span class="string">&#x27;change&#x27;</span>,<span class="function">()=&gt;</span>&#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;空闲状态发生变化！&#x27;</span>)</span><br><span class="line">&#125;) <span class="comment">// 也可以绑定idle.onchange</span></span><br></pre></td></tr></table></figure>

<h2 id="启动检测事件触发"><a href="#启动检测事件触发" class="headerlink" title="启动检测事件触发"></a>启动检测事件触发</h2><p>绑定完事件以后并不会立刻就能够触发事件的变化，还需要手动启动检测事件的触发</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 基础</span></span><br><span class="line">idle.<span class="title function_">start</span>()</span><br><span class="line"><span class="comment">// 设定空闲时间的变化，为了防止被滥用，空闲时间至少需要1分钟</span></span><br><span class="line">idle.<span class="title function_">start</span>(&#123;</span><br><span class="line">    <span class="attr">threshold</span>:<span class="number">60000</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 设定可终止检测</span></span><br><span class="line"><span class="keyword">const</span> controller = <span class="keyword">new</span> <span class="title class_">AbortController</span>();</span><br><span class="line"><span class="keyword">const</span> signal = controller.<span class="property">signal</span>;</span><br><span class="line">idle.<span class="title function_">start</span>(&#123;</span><br><span class="line">    <span class="attr">threshold</span>:<span class="number">60000</span>,</span><br><span class="line">    signal</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// </span></span><br></pre></td></tr></table></figure>

<h2 id="状态检测"><a href="#状态检测" class="headerlink" title="状态检测"></a>状态检测</h2><p>idle实例提供两个成员，<code>userState</code>和<code>screenState</code>，分别代表当前用户状态和屏幕锁定状态</p>
<p><code>userState</code>:<code>active</code> || <code>idle</code></p>
<p><code>screenState</code>:<code>unlocked</code>||<code>locked</code></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">idle.<span class="title function_">addEventListener</span>(<span class="string">&#x27;change&#x27;</span>, <span class="function"><span class="params">e</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">`[<span class="subst">$&#123;<span class="keyword">new</span> <span class="built_in">Date</span>().toLocaleString()&#125;</span>] idle change: <span class="subst">$&#123;idleDetector.userState&#125;</span>, <span class="subst">$&#123;idleDetector.screenState&#125;</span>`</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>

<h2 id="异常情况"><a href="#异常情况" class="headerlink" title="异常情况"></a>异常情况</h2><p>在chrome上请求此权限必须为<code>user gesture</code>触发，也就是浏览器不能启动就使用代码立刻进行该权限的自动请求，那么chrome在请求权限时会报错<code>Initialization error: NotAllowedError: Failed to execute &#39;requestPermission&#39; on &#39;IdleDetector&#39;: Must be handling a user gesture to show a permission request..</code>。但是在控制台中手动请求权限则不会有此限制，如果使用控制台手动进行了权限请求，或者在设置中手动打开了某个网站的该权限，也可以直接进行使用而不需要再手动请求。正确的触发方法应该是为某个dom绑定点击事件，点击后在事件回调中手动触发，才能打开权限请求框。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">button</span> <span class="attr">id</span>=<span class="string">&quot;btn&quot;</span> <span class="attr">onClick</span>=<span class="string">&quot;reqIdle&quot;</span>&gt;</span>申请权限<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">async</span> <span class="keyword">function</span> <span class="title function_">reqIdle</span>(<span class="params"></span>)&#123;</span><br><span class="line">    <span class="keyword">if</span>(<span class="keyword">await</span> <span class="title class_">IdleDetector</span>.<span class="title function_">requestPermission</span>() === <span class="string">&#x27;granted&#x27;</span>)&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;获得权限&#x27;</span>)</span><br><span class="line">    &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">        <span class="variable language_">console</span>.<span class="title function_">log</span>(<span class="string">&#x27;用户禁止权限&#x27;</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<blockquote>
<p>使用<code>btn.click()</code>这种取巧的方法也是不行的，必须是用户点击</p>
</blockquote>
<h2 id="开发者工具状态切换"><a href="#开发者工具状态切换" class="headerlink" title="开发者工具状态切换"></a>开发者工具状态切换</h2><p>空闲状态检测隶属于传感器类的api，因此在chrome控制台的Sensor/传感器面板中可控制模拟<br><img src="https://gitee.com/assd12138/cdnpics/raw/master/img/20210926135630.png"></p>
<h2 id="在线实例"><a href="#在线实例" class="headerlink" title="在线实例"></a>在线实例</h2><p>开始侦听后使用开发者工具修改页面的状态，那么网页也会同步的打印相关的状态</p>

<button id="btn" onClick="main()">开始侦听</button>
<div id="msg"></div>
<script>
    function msgLog(msg) {
        const newMsg = document.createElement('div')
        newMsg.innerHTML = msg
        document.querySelector('#msg').appendChild(newMsg)
    }
    async function main() {
        if (!window.IdleDetector) {
            msgLog('没有此api，无法使用')
            return
        }

        try {
            if ((await IdleDetector.requestPermission()) === 'denied') {
                msgLog('用户禁止了权限')
                return
            }
    
            let idleDetector = new IdleDetector()
            idleDetector.addEventListener('change', (e) => {
                msgLog(
                    `[${new Date().toLocaleString()}] 空闲状态变化: ${
                        idleDetector.userState
                    }, ${idleDetector.screenState}`
                )
            })
            idleDetector.start({ threshold: 60000 })
        } catch (e) {
            msgLog(`Initialization error: ${e}.`)
        }
    }
</script>


    </div>

    
    
    

    <footer class="post-footer">
          <div class="post-tags">
              <a href="/page/tags/JavaScript/" rel="tag"># JavaScript</a>
              <a href="/page/tags/%E5%B0%9D%E9%B2%9C/" rel="tag"># 尝鲜</a>
          </div>

        

          <div class="post-nav">
            <div class="post-nav-item">
                <a href="/page/2021/09/17/%E5%9B%BE%E8%A1%A8%E7%B1%BB%E5%9E%8B%E7%9A%84%E9%A1%B5%E9%9D%A2%E6%87%92%E5%8A%A0%E8%BD%BD/" rel="prev" title="图表类型的页面懒加载">
                  <i class="fa fa-chevron-left"></i> 图表类型的页面懒加载
                </a>
            </div>
            <div class="post-nav-item">
                <a href="/page/2021/10/12/%E5%8F%96%E8%89%B2%E5%99%A8/" rel="next" title="取色器">
                  取色器 <i class="fa fa-chevron-right"></i>
                </a>
            </div>
          </div>
    </footer>
  </article>
</div>






    <div class="comments utterances-container"></div>
</div>
  </main>

  <footer class="footer">
    <div class="footer-inner">


<div class="copyright">
  &copy; 
  <span itemprop="copyrightYear">2023</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">爱爱爱呵风他</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" rel="noopener" target="_blank">Hexo</a> & <a href="https://theme-next.js.org/" rel="noopener" target="_blank">NexT.Gemini</a> 强力驱动
  </div>

    </div>
  </footer>

  
  <script size="300" alpha="0.6" zIndex="-1" src="https://cdn.jsdelivr.net/npm/ribbon.js@1.0.2/dist/ribbon.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script>
<script src="/page/js/comments.js"></script><script src="/page/js/utils.js"></script><script src="/page/js/motion.js"></script><script src="/page/js/next-boot.js"></script>

  
<script src="https://cdn.jsdelivr.net/npm/hexo-generator-searchdb@1.4.0/dist/search.js" integrity="sha256-vXZMYLEqsROAXkEw93GGIvaB2ab+QW6w3+1ahD9nXXA=" crossorigin="anonymous"></script>
<script src="/page/js/third-party/search/local-search.js"></script>





  




<script class="next-config" data-name="utterances" type="application/json">{"enable":true,"repo":"assd12138/utterancesComment","issue_term":"pathname","theme":"preferred-color-scheme"}</script>
<script src="/page/js/third-party/comments/utterances.js"></script>

</body>
</html>
